<article class="module-coin-out">
    <div class="ui-account-box">
        <div class="drawout-middle ui-account-box-inner">
            <div class="ui-title">
                <span class="strong">{{ coinType}}</span>
                <span class="text">{{ $tc('common.withdraw', 1) }}</span>
            </div>
            <div class="asset-info" >
                <asset-drop :coin="coinType" :coin-list="coinList" :onSuccess="changeCoinType"></asset-drop>
                <span class="asset-info-item price">{{$t('common.newPrice')}}：<b>${{usdPrice}}</b></span>
                <span class="asset-info-item price"><b>¥{{cnyPrice}}</b></span>
                <span class="asset-info-item">{{$t('common.available')}}：{{coinBalance}}</span>
                <span class="asset-info-item fn-gray">{{$t('common.held')}}：{{coinLock}}</span>
            </div>
            <div class="box-content">
                <div class="form-wrap">
                    <validator :rules="rules">
                        <form class="m-form-page" :class="{'m-form-page--google':googleStatus === 'ON'}" name="form" action="javascript:;" autocomplete="new-password">
                            <div class="drawout-tip">
                                <div class="drawout-tip-label fn-bold">{{ $t('asset.withdraw.withdrawLabel') }}</div>
                                <div class="drawout-tip-text">
                                    <p class="text-item">{{$t('asset.withdraw.withdrawTip1', {coin: coinType})}}</p>
                                    <p class="text-item">{{$t('asset.withdraw.withdrawTip2', {num: $$assetMap[coinType].ASSETCODECONFIRMNUM})}}</p>
                                </div>
                            </div>
                            <div class="col-row">
                                <div class="col-label">
                                    <label>{{ $t('common.address') }}</label>
                                </div>
                                <div class="col-text col-text--block">
                                    <v-select :options="coinAddressList"
                                              :value="form.address"
                                              v-on:selectVal="onChangeAddress"></v-select>
                                    <div class="ui-tip" style="width: 500px;">
                                        <template v-if="addressError">{{ $t('asset.withdraw.chooseAddress') }}</template>
                                    </div>
                                </div>
                                <div class="col-tip">
                                    <a :href="'#/wallet/'+coinType">{{ $t('asset.withdraw.addressManagement')}}</a>
                                </div>
                            </div>
                            <div class="col-row">
                                <div class="col-label">
                                    <label for="amount">{{ $t('asset.withdraw.sendAmount') }}</label>
                                </div>
                                <div class="col-input drawout-input">
                                    <input type="text"
                                           id="amount"
                                           v-number="{model: 'form.amount', precision: precision}"
                                           class="fn-block"
                                           autocomplete="new-password"
                                           name="amount"
                                           maxlength="18"
                                           :placeholder="$t('asset.withdraw.amountRequireTip')"
                                           v-model="form.amount">
                                    <div class="ui-tip"></div>
                                </div>
                            </div>
                            <div class="col-row">
                                <div class="col-label">
                                    <label for="payPwd">{{ $t('asset.withdraw.fee') }}</label>
                                </div>
                                <div class="col-input">
                                    <select class="fn-block">
                                        <option :value="fee">{{fee}}</option>
                                    </select>
                                    <div class="ui-tip"></div>
                                </div>
                            </div>

                            <div class="col-row">
                                <div class="col-label">
                                    <label for="payPwd">{{ $t('asset.withdraw.assetPassword') }}</label>
                                </div>
                                <div class="col-input">
                                    <input type="password"
                                           class="fn-block"
                                           autocomplete="new-password"
                                           id="payPwd"
                                           name="paypwd"
                                           ref="pwd"
                                           :placeholder="$t('common.assetPassRequireTip')"
                                           v-model="form.paypwd">
                                    <div class="ui-tip"></div>
                                </div>
                            </div>
                            <div class="col-row">
                                <div class="col-label">
                                    <label for="verifyCode">{{ $t('common.pVerification') }}</label>
                                </div>
                                <div class="col-input">
                                    <verify-code :on-success="onSendSuccess"
                                                 :on-fail="onSendFail"></verify-code>
                                    <input type="text"
                                           id="verifyCode"
                                           name="identifyingCode"
                                           class="input input--small"
                                           maxlength="6"
                                           autocomplete="new-password"
                                           :placeholder="$t('common.pVerification')"
                                           v-model="form.identifyingCode">
                                    <div class="ui-tip"></div>
                                </div>
                            </div>
                            <div class="col-row" v-if="googleStatus === 'ON'">
                                <div class="col-label">
                                    <label for="googleCode">{{ $t('common.pGoogleCode') }}</label>
                                </div>
                                <div class="col-input">
                                    <input type="text"
                                           class="fn-block"
                                           autocomplete="new-password"
                                           id="googleCode"
                                           name="googleCode"
                                           maxlength="6"
                                           :placeholder="$t('common.pGoogleCode')"
                                           v-model="form.googleCode">
                                    <div class="ui-tip"></div>
                                </div>
                            </div>
                            <div class="col-row col-row--btns">
                                <div class="col-label">
                                    <label>&nbsp;</label>
                                </div>
                                <div class="col-text">
                                    <button type="submit"
                                            class="ui-btn ui-btn--block"
                                            v-if="isRequesting === false"
                                            @click="submit()">{{ $tc('common.withdraw', 1) }}
                                    </button>
                                    <button type="submit"
                                            class="ui-btn  ui-btn--block"
                                            disabled
                                            v-if="isRequesting === true">{{ $t('common.waiting') }}...
                                    </button>
                                </div>
                            </div>
                        </form>
                    </validator>
                </div>
            </div>
        </div>
        <div class="drawout-bottom ui-account-box-inner">
            <h3 class="ui-title-account"><span class="strong">{{ coinType }}</span><span class="text"> {{ $t('asset.withdraw.withdrawalRecords') }}</span></h3>
            <div class="box-content">
                <div class="table-wrap">
                    <div class="m-table">
                        <table>
                            <thead>
                            <tr>
                                <th width="18%">{{ $t('asset.withdraw.time') }}</th>
                                <th width="37%">{{ $t('asset.withdraw.withdrawalTo') }}</th>
                                <th width="17%" class="fn-ta-right">{{ $t('asset.withdraw.volume') }}({{ coinType }})</th>
                                <th width="12%" class="fn-ta-right">{{ $t('asset.withdraw.fee') }}({{ coinType }})</th>
                                <th width="16%" class="fn-ta-right">{{ $t('asset.withdraw.status') }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="item in list" v-if="isLoading === false && list.length > 0">
                                <td>{{item.createDate | timezone}}</td>
                                <td>
                                    <popover placement="top" trigger="hover" class="address" width="auto">
                                        <span class="text fn-ellipsis" style="display: inline-block; width: 320px;">{{item.transferOutAddress}}</span>
                                        <div slot="content">
                                            <p>{{item.transferOutAddress}}</p>
                                        </div>
                                    </popover>
                                </td>
                                <td class="fn-ta-right">{{filter.floorFix(item.amount)}}</td>
                                <td class="fn-ta-right">{{item.fee}}</td>
                                <td class="fn-ta-right">
                                    <span class="fn-green" v-if="item.status === 'SUCCESS'">{{ $t('asset.common.completed') }}</span>
                                    <span class="fn-blue" v-if="item.status === 'PROCESSING'">{{ $t('asset.common.pending') }}</span>
                                    <span class="fn-blue" v-if="item.status === 'WAIT'">{{ $t('asset.common.pending') }}</span>
                                    <span class="fn-blue" v-if="item.status === 'UNKNOWN'">{{ $t('asset.common.pending') }}</span>
                                    <span class="fn-dark-gray" v-if="item.status === 'FAILURE'">{{ $t('asset.common.failed') }}</span>
                                    <span class="fn-orange" v-if="item.status === 'REFUSE'">{{ $t('asset.common.refunded') }}</span>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <loading v-if="isLoading"></loading>
                        <no-data v-if="isLoading === false && list && list.length === 0"></no-data>
                    </div>
                    <pager :page-no="pageNo"
                           :page-size="pageSize"
                           :on-page-change="changePage"
                           :page-num="pageNum"></pager>
                </div>
            </div>
        </div>
    </div>

    <set-pay-pwd v-if="isShowSetPayPwd === false"
                 v-on:hide="isShowSetPayPwd = true"></set-pay-pwd>
</article>
